<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>修改商品信息</title>
    <style>
        /* 整体页面背景设置为浅灰色系，营造简洁科技感 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f5;
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 页面主容器，设置宽度、居中、内边距、背景色及轻微阴影效果 */
        .main-container {
            width: 80%;
            margin: 50px auto;
            padding: 30px;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        /* 标题样式，字体大小、加粗、颜色及下边距 */
        h1 {
            font-size: 30px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 20px;
        }

        /* 表单样式 */
        form {
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        /* 表单标签样式 */
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }

        /* 表单输入框样式 */
        input[type="text"],
        input[type="number"],
        input[type="date"],
        select {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        input[type="date"]:focus,
        select:focus {
            border-color: #007bff;
        }

        /* 下拉菜单样式 */
        select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
            background-size: 12px 12px;
        }

        /* 提交按钮样式 */
        input[type="submit"],
        .back-button {
            display: inline-block;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 5px;
            font-size: 18px;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 15px;
        }

        input[type="submit"] {
            background-color: #28a745;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }

        input[type="submit"]:hover {
            opacity: 0.8;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .back-button {
            background-color: #6c757d;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .back-button:hover {
            opacity: 0.8;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        }

        /* 错误提示信息样式 */
        .error-message {
            color: #dc3545;
            margin-bottom: 10px;
            font-size: 14px;
            display: none;
        }

        /* 编号已存在提示信息样式 */
        .id-exists-message {
            color: #dc3545;
            margin-bottom: 10px;
            font-size: 14px;
            display: none;
        }

        /* 只读输入框样式 */
        input[readonly] {
            background-color: #e9ecef;
            border-color: #ced4da;
            cursor: not-allowed;
        }

        /* 按钮容器样式，将按钮放置在底部并调整间距 */
        .button-container {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {
            // 使用 jQuery 的缓存机制，提前存储 DOM 元素的 jQuery 对象
            const $id = $('#id');
            const $categoryId = $('#categoryId');
            const $name = $('#name');
            const $price = $('#price');
            const $description = $('#description');
            const $inPrice = $('#inPrice');
            const $number = $('#number');
            const $createDate = $('#createDate');
            const $shelfLife = $('#shelfLife');
            const $supplier_id = $('#supplier_id');
            const $idError = $('#idError');
            const $categoryIdError = $('#categoryIdError');
            const $nameError = $('#nameError');
            const $priceError = $('#priceError');
            const $descriptionError = $('#descriptionError');
            const $inPriceError = $('#inPriceError');
            const $numberError = $('#numberError');
            const $createDateError = $('#createDateError');
            const $shelfLifeError = $('#shelfLifeError');
            const $supplier_idError = $('#supplier_idError');
            const $idExistsError = $('#idExistsError');
            const $updateForm = $('#updateForm');

            // 获取原始商品ID（用于后续排除当前记录本身的ID验证）
            const originalId = '${goods.id}';

            $id.on('input', function () {
                const inputId = $id.val();
                if (inputId !== originalId) {
                    // 发送AJAX请求验证新输入的ID是否已存在
                    const xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            const exists = JSON.parse(xhr.responseText);
                            if (exists) {
                                $idExistsError.show();
                                $updateForm.on('submit', function (e) {
                                    e.preventDefault();
                                });
                            } else {
                                $idExistsError.hide();
                                $updateForm.off('submit');
                            }
                        }
                    };
                    xhr.open('GET', 'checkGoodIdExists.action?id=' + inputId, true);
                    xhr.send();
                } else {
                    $idExistsError.hide();
                }
            });

            $updateForm.submit(function (e) {
                let isValid = true;
                const errorMessages = [];
                const id = $id.val();
                const categoryId = $categoryId.val();
                const name = $name.val();
                const price = $price.val();
                const description = $description.val();
                const inPrice = $inPrice.val();
                const number = $number.val();
                const createDate = $createDate.val();
                const shelfLife = $shelfLife.val();
                const supplier_id = $supplier_id.val();

                // 商品 ID 验证
                if (id === '') {
                    $idError.text('商品 ID 不能为空').show();
                    errorMessages.push('商品 ID 不能为空');
                    isValid = false;
                } else {
                    $idError.hide();
                }

                // 商品类别验证
                if (categoryId === '') {
                    $categoryIdError.text('商品类别必须选择').show();
                    errorMessages.push('商品类别必须选择');
                    isValid = false;
                } else {
                    $categoryIdError.hide();
                }

                // 商品名称验证
                if (name === '') {
                    $nameError.text('商品名称不能为空，且长度不超过50个字符').show();
                    errorMessages.push('商品名称不能为空，且长度不超过50个字符');
                    isValid = false;
                } else if (name.length > 50) {
                    $nameError.text('商品名称应简洁明了，长度不超过50个字符').show();
                    isValid = false;
                } else {
                    $nameError.hide();
                }

                // 商品价格验证
                if (price === '') {
                    $priceError.text('商品价格不能为空，且请输入正确的价格格式，保留两位小数').show();
                    errorMessages.push('商品价格不能为空，且请输入正确的价格格式，保留两位小数');
                    isValid = false;
                } else if (!/^\d+(\.\d{1,2})?$/.test(price)) {
                    $priceError.text('请输入正确的价格格式，保留两位小数').show();
                    isValid = false;
                } else {
                    $priceError.hide();
                }

                // 商品描述验证
                if (description === '') {
                    $descriptionError.text('商品描述不能为空').show();
                    errorMessages.push('商品描述不能为空');
                    isValid = false;
                } else {
                    $descriptionError.hide();
                }

                // 商品进价验证
                if (inPrice === '') {
                    $inPriceError.text('商品进价不能为空，且请输入正确的价格格式，保留两位小数').show();
                    errorMessages.push('商品进价不能为空，且请输入正确的价格格式，保留两位小数');
                    isValid = false;
                } else if (!/^\d+(\.\d{1,2})?$/.test(inPrice)) {
                    $inPriceError.text('请输入正确的价格格式，保留两位小数').show();
                    isValid = false;
                } else {
                    $inPriceError.hide();
                }

                // 商品剩余数量验证
                if (number === '') {
                    $numberError.text('商品剩余数量不能为空，且应为正整数').show();
                    errorMessages.push('商品剩余数量不能为空，且应为正整数');
                    isValid = false;
                } else if (!/^\d+$/.test(number)) {
                    $numberError.text('商品剩余数量不能为空，且应为正整数').show();
                    isValid = false;
                } else {
                    $numberError.hide();
                }

                // 商品生产日期验证
                if (createDate === '') {
                    $createDateError.text('商品生产日期不能为空').show();
                    errorMessages.push('商品生产日期不能为空');
                    isValid = false;
                } else {
                    $createDateError.hide();
                }

                // 商品保质期验证
                if (shelfLife === '') {
                    $shelfLifeError.text('商品保质期不能为空，且应为正整数').show();
                    errorMessages.push('商品保质期不能为空，且应为正整数');
                    isValid = false;
                } else if (!/^\d+$/.test(shelfLife)) {
                    $shelfLifeError.text('商品保质期不能为空，且应为正整数').show();
                    isValid = false;
                } else {
                    $shelfLifeError.hide();
                }

                // 供应商验证
                if (supplier_id === '') {
                    $supplier_idError.text('供应商必须选择').show();
                    errorMessages.push('供应商必须选择');
                    isValid = false;
                } else {
                    $supplier_idError.hide();
                }

                if (!isValid) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'error',
                        title: '输入错误',
                        html: errorMessages.join('<br>')
                    });
                } else {
                    e.preventDefault();
                    //const formData = new FormData(this);
                    var formData = $(this).serialize();
                    $.ajax({
                        url: 'good.action?action=update',
                        type: 'POST',
                        data: formData,
                        //processData: false,
                       // contentType: false,
                        success: function (response) {
                            if (response.startsWith("修改成功")) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '修改成功',
                                    text: '商品信息修改成功'
                                }).then(function () {
                                    window.location.href = 'good.action?action=list';
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: '修改失败',
                                    text: response
                                }).then(function () {
                                    // 刷新页面
                                    window.location.reload();
                                });
                            }
                        },
                        error: function (xhr, status, error) {
                            Swal.fire({
                                icon: 'error',
                                title: '请求出错',
                                text: '出现网络问题或服务器错误，请稍后再试'
                            });
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
<div class="main-container">
    <h1>修改商品信息</h1>
    <form action="good.action?action=update" method="post" id="updateForm">
        <!-- 显示商品 ID，但设置为只读，不允许修改 -->
        <label for="id">商品 ID</label>
        <input type="text" id="id" name="id" value="${goods.id}" readonly>
        <span class="error-message" id="idError">商品 ID 不能为空</span>

        <label for="categoryId">商品类别</label>
        <select id="categoryId" name="categoryId" required>
            <%-- 假设后端已将商品类别列表（categoryList）存放到请求作用域中，遍历生成选项 --%>
            <c:forEach items="${categoryList}" var="category">
                <option value="${category.id}" ${category.id == goods.categoryId? 'selected' : ''}>${category.name}</option>
            </c:forEach>
        </select>
        <span class="error-message" id="categoryIdError">商品类别必须选择</span>

        <label for="name">商品名称</label>
        <input type="text" id="name" name="name" value="${goods.name}" required>
        <span class="error-message" id="nameError">商品名称不能为空，且长度不超过50个字符</span>

        <label for="price">商品价格</label>
        <input type="number" step="0.01" id="price" name="price" value="${goods.price}" required>
        <span class="error-message" id="priceError">商品价格不能为空，且请输入正确的价格格式，保留两位小数</span>

        <label for="description">商品描述</label>
        <input type="text" id="description" name="description" value="${goods.description}" required>
        <span class="error-message" id="descriptionError">商品描述不能为空</span>

        <label for="inPrice">商品进价</label>
        <input type="number" step="0.01" id="inPrice" name="inPrice" value="${goods.inPrice}" required>
        <span class="error-message" id="inPriceError">商品进价不能为空，且请输入正确的价格格式，保留两位小数</span>

        <label for="number">商品剩余数量</label>
        <input type="number" id="number" name="number" value="${goods.number}" required>
        <span class="error-message" id="numberError">商品剩余数量不能为空，且应为正整数</span>

        <label for="createDate">商品生产日期</label>
        <input type="date" id="createDate" name="createDate" value="${goods.createDate}" required>
        <span class="error-message" id="createDateError">商品生产日期不能为空</span>

        <label for="shelfLife">商品保质期</label>
        <input type="number" id="shelfLife" name="shelfLife" value="${goods.shelfLife}" required>
        <span class="error-message" id="shelfLifeError">商品保质期不能为空，且应为正整数</span>

        <label for="supplier_id">供应商</label>
        <select id="supplier_id" name="supplier_id" required>
            <%-- 假设后端已将供应商列表（supplierList）存放到请求作用域中，遍历生成选项 --%>
            <c:forEach items="${supplierList}" var="supplier">
                <option value="${supplier.id}" ${supplier.id == goods.supplier_id? 'selected' : ''}>${supplier.name}</option>
            </c:forEach>
        </select>
        <span class="error-message" id="supplier_idError">供应商必须选择</span>

        <div class="button-container">
            <input type="submit" value="提交">
            <a href="good.action?action=list" class="back-button">返回</a>
        </div>

        <span class="id-exists-message" id="idExistsError">该商品编号已存在，请重新输入</span>
    </form>
</div>
</body>
</html>